import { Socket , io } from 'socket.io-client'
import React , { useEffect, useState , createElement} from 'react';

// 组件
import { Comment , Avatar } from 'antd';


interface IMessage{
    username : string,
    message : string
}

let socket : Socket;
const Chat: React.FC = () =>{

    const [message, setMessage] = useState< IMessage[] >([]);

    useEffect(() => {
        socket = io( 'http://192.168.137.1:3000/' );
        socket.on( 'connect...' , ()=>{
            console.log('connect...');
        });

        socket.on('new message' , ( res : IMessage )=> {
            console.log( 'res...' , res);
            console.log( '未改变' , message);
            setMessage(message.concat(res))
            console.log( '改变后' , message);
            
        })
    }, [])
    return <div>
        <p>{JSON.stringify(message)}</p>

        {
            message.map((item,index)=>{
                return <Comment key={index}
                author={<a>{item.username}</a>}
                avatar={
                    <Avatar
                    src="https://portrait.gitee.com/uploads/avatars/user/1904/5712404_zhu_zhang_yue_1621239397.png!avatar30"
                    alt="Han Solo"
                    />
                }
                content={
                    <p>
                    {
                        item.message
                    }
                    </p>
                }
                />
            })
        }
        
    </div>
}

export default Chat